<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>无</view>
				<view>按钮主题，优先级低于数据集中的设置</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义按钮主题色，优先级低于数据集中的设置</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定文字色，优先级低于数据集中的设置</view>
			</view>
			<view class="tr">
				<view>bgColor</view>
				<view>String</view>
				<view>#fff</view>
				<view>对话框背景色</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>Number, String</view>
				<view>0.5em</view>
				<view>对话框圆角，需带单位，或0</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>按钮预定义尺寸，可选lg、md、sm</view>
			</view>
			<view class="tr">
				<view>point</view>
				<view>String</view>
				<view>center</view>
				<view>窗口位置，top上、center中、bottom下、其他(left左、right右，须具体设置窗口宽度)</view>
			</view>
			<view class="tr">
				<view>shift</view>
				<view>Object</view>
				<view>无</view>
				<view>窗口偏移，限制popup的显示区，用于自定义导航及自定义tab栏等。left、right、top、bottom</view>
			</view>
			<view class="tr">
				<view>useMask</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用遮罩</view>
			</view>
			<view class="tr">
				<view>maskClick</view>
				<view>Boolean</view>
				<view>true</view>
				<view>点击遮罩关闭</view>
			</view>
			<view class="tr">
				<view>spaceOutside</view>
				<view>Number, String, Array</view>
				<view>0</view>
				<view>对话框外间距，需带单位，可设置从上开始顺时针四个方向</view>
			</view>
			<view class="tr">
				<view>spaceInside</view>
				<view>Number, String, Array</view>
				<view>0</view>
				<view>对话框内间距，需带单位，可设置从上开始顺时针四个方向</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>String</view>
				<view>75%</view>
				<view>对话框默认宽，必须带单位</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>无</view>
				<view>对话框默认高，必须带单位。为空表示自动</view>
			</view>
			<view class="tr">
				<view>maxWidth</view>
				<view>String</view>
				<view>40em</view>
				<view>对话框最大宽，用于响应式，必须带单位。60em约900px左右</view>
			</view>
			<view class="tr">
				<view>maxHeight</view>
				<view>String</view>
				<view>无</view>
				<view>内容区域最大高</view>
			</view>
			<view class="tr">
				<view>bodyHeight</view>
				<view>String</view>
				<view>无</view>
				<view>内容区域高度，不设置内容区域将自动撑高，且未设置maxHeight则不会出现滚动条</view>
			</view>
			<view class="tr">
				<view>buttonHeight</view>
				<view>Number</view>
				<view>无</view>
				<view>全局按钮默认高</view>
			</view>
			<view class="tr">
				<view>useTitle</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用对话框标题</view>
			</view>
			<view class="tr">
				<view>title</view>
				<view>String</view>
				<view>无</view>
				<view>对话框标题</view>
			</view>
			<view class="tr">
				<view>titleHeight</view>
				<view>Number</view>
				<view>2.5</view>
				<view>非嵌入式标题栏高度，固定单位em</view>
			</view>
			<view class="tr">
				<view>titleBgColor</view>
				<view>String</view>
				<view>无</view>
				<view>嵌入式标题栏背景颜色</view>
			</view>
			<view class="tr">
				<view>useContent</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用内容区</view>
			</view>
			<view class="tr">
				<view>topbar</view>
				<view>Object</view>
				<view>无</view>
				<view>顶部按钮数据集，说明见下方</view>
			</view>
			<view class="tr">
				<view>toolbar</view>
				<view>Object</view>
				<view>无</view>
				<view>工具按钮数据集，说明见下方</view>
			</view>
			<view class="tr">
				<view>bottombar</view>
				<view>Object</view>
				<view>无</view>
				<view>底部按钮数据集，说明见下方</view>
			</view>
			<view class="tr">
				<view>@event</view>
				<view>事件</view>
				<view>	</view>
				<view>按钮点击抛出的事件，提交定义的事件名</view>
			</view>
			<view class="tr">
				<view>@open</view>
				<view>事件</view>
				<view>	</view>
				<view>对话框打开事件，提交调用open方法时传入的参数</view>
			</view>
			<view class="tr">
				<view>@close</view>
				<view>事件</view>
				<view>	</view>
				<view>对话框关闭事件，提交调用close方法时传入的参数，内部按钮调用close方法传入字符串fromButton参数</view>
			</view>
			<view class="tr">
				<view>open</view>
				<view>function</view>
				<view>	</view>
				<view>外部使用refs调用，打开对话框，可携带一个参数，随open事件向外提交</view>
			</view>
			<view class="tr">
				<view>close</view>
				<view>function</view>
				<view>	</view>
				<view>外部使用refs调用，打开对话框，可携带一个参数，随close事件向外提交</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<vi-collapse title="按钮条数据集" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th bb-dashed-default">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>按钮默认主题，优先级低于单独按钮设置，高于对话框设置</view>
					</view>
					<view class="tr">
						<view>color</view>
						<view>String</view>
						<view>按钮自定义主题色，优先级低于单独按钮设置，高于对话框设置</view>
					</view>
					<view class="tr">
						<view>textColor</view>
						<view>String</view>
						<view>固定文字色，优先级低于单独按钮设置</view>
					</view>
					<view class="tr">
						<view>borderColor</view>
						<view>String</view>
						<view>固定边框色，优先级低于单独按钮设置</view>
					</view>
					<view class="tr">
						<view>backgroundColor</view>
						<view>String</view>
						<view>固定背景色，优先级低于单独按钮设置</view>
					</view>
					<view class="tr">
						<view>palin</view>
						<view>boolean</view>
						<view>按钮镂空，topbar、toolbar默认值true</view>
					</view>
					<view class="tr">
						<view>buttonWidth</view>
						<view>String</view>
						<view>按钮宽，优先级低于单独按钮设置。需带单位</view>
					</view>
					<view class="tr">
						<view>buttonHeight</view>
						<view>Number</view>
						<view>按钮栏高度，按钮自动撑满。固定单位em，默认值3</view>
					</view>
					<view class="tr">
						<view>radius</view>
						<view>Number, String, Array</view>
						<view>按钮圆角，优先级低于单独按钮设置。需带单位，或0，可设置从左上开始顺时针四个角</view>
					</view>
					<view class="tr">
						<view>line</view>
						<view>boolean</view>
						<view>
							使用分隔线
							<view>topbar在按钮下方，且开启嵌入标题时有效</view>
							<view>toolbar在按钮上方</view>
							<view>bottombar在按钮上方；</view>
							<view>toolbar与bottombar合并行时，优先使用toolbar的线，若toolbar无数据则使用bottombar的线</view>
						</view>
					</view>
					<view class="tr">
						<view>lineWidth</view>
						<view>String</view>
						<view>分隔线宽，必须带单位，自动居中。默认值100%</view>
					</view>
					<view class="tr">
						<view>lineHeight</view>
						<view>String</view>
						<view>分隔线高，必须带单位。默认值1px</view>
					</view>
					<view class="tr">
						<view>lineColor</view>
						<view>String</view>
						<view>分隔线颜色。默认值#eee</view>
					</view>
					<view class="tr">
						<view>fontSize</view>
						<view>Number, String</view>
						<view>按钮文字大小，需带单位，或0。0和空值等于不设置</view>
					</view>
					<view class="tr">
						<view>bold</view>
						<view>boolean</view>
						<view>按钮文字加粗</view>
					</view>
					<view class="tr">
						<view>aside</view>
						<view>boolean</view>
						<view>
							按钮分列两侧
							<view>topbar为嵌入标题模式，按钮置于标题两侧</view>
							<view>toolbar与bottombar同时开启后合并为一行，toolbar在左</view>
						</view>
					</view>
					<view class="tr">
						<view>asideNum</view>
						<view>Array</view>
						<view>topbar开启aside后设置两端按钮数量。默认值[1,1]</view>
					</view>
					<view class="tr">
						<view>align</view>
						<view>String</view>
						<view>
							按钮水平对齐
							<view>可选值left、right、center、evenly、between</view>
							<view>topbar、toolbar在未开启aside时有效，开启后默认两端对齐</view>
							<view>bottombar在未开启column时有效</view>
						</view>
					</view>
					<view class="tr">
						<view>column</view>
						<view>boolean</view>
						<view>竖行按钮模式，bottombar使用，按钮竖向排列，与aside模式互斥，优先于aside模式</view>
					</view>
					<view class="tr">
						<view>list</view>
						<view>Array(Object)</view>
						<view>按钮数据集</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		<view class="p-sm">
			<vi-collapse title="按钮数据集list" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th bb-dashed-default">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>按钮主题，优先级最高</view>
					</view>
					<view class="tr">
						<view>color</view>
						<view>String</view>
						<view>按钮自定义主题色，优先级最高</view>
					</view>
					<view class="tr">
						<view>textColor</view>
						<view>String</view>
						<view>固定文字色，优先级最高</view>
					</view>
					<view class="tr">
						<view>borderColor</view>
						<view>String</view>
						<view>固定边框色，优先级最高</view>
					</view>
					<view class="tr">
						<view>backgroundColor</view>
						<view>String</view>
						<view>固定背景色，优先级最高</view>
					</view>
					<view class="tr">
						<view>palin</view>
						<view>boolean</view>
						<view>按钮镂空，优先级最高</view>
					</view>
					<view class="tr">
						<view>borderWidth</view>
						<view>Number</view>
						<view>按钮边框宽，可带单位，可设置从上开始顺时针四个方向角</view>
					</view>
					<view class="tr">
						<view>borderType</view>
						<view>String</view>
						<view>边框类型，默认值solid</view>
					</view>
					<view class="tr">
						<view>radius</view>
						<view>Number, String, Array</view>
						<view>按钮圆角，优先级最高。需带单位，或0，可设置从左上开始顺时针四个角</view>
					</view>
					<view class="tr">
						<view>disabled</view>
						<view>boolean</view>
						<view>按钮禁用</view>
					</view>
					<view class="tr">
						<view>event</view>
						<view>String</view>
						<view>按钮事件名，<text class="color-error">必须</text></view>
					</view>
					<view class="tr">
						<view>close</view>
						<view>Boolean</view>
						<view>按钮点击后关闭对话框</view>
					</view>
					<view class="tr">
						<view>name</view>
						<view>String</view>
						<view>按钮标题，<text class="color-error">必须</text></view>
					</view>
					<view class="tr">
						<view>style</view>
						<view>String</view>
						<view>自定义style样式</view>
					</view>
					<view class="tr">
						<view>class</view>
						<view>String</view>
						<view>自定义按钮样式类名，只对全局样式或穿透样式有效</view>
					</view>
					<view class="tr">
						<view>width</view>
						<view>String</view>
						<view>按钮宽，必须带单位，优先级最高</view>
					</view>
					<view class="tr">
						<view>fontSize</view>
						<view>Number, String</view>
						<view>按钮文字大小，需带单位，或0。0和空值等于不设置</view>
					</view>
					<view class="tr">
						<view>bold</view>
						<view>Boolean</view>
						<view>按钮文字加粗</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{'&lt;vi-dialog ref="组件id" title="对话框标题" :bottombar="bottombar">对话框内容&lt;/vi-dialog>'}}
				<view>
					使用refs调用组件的open方法打开
				</view>
			</view>
			<view class="py-sm">
				<vi-dialog ref="demo1" bodyHeight="300px" :bottombar="bottombar" title="标题" radius="0.5em" :useMask="null">
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容</view>
					<view>内容最后</view>
				</vi-dialog>
				<vi-button @click="openWin('demo1')">打开</vi-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottombar:{
					list:[
						{name:"确定", event:"ok", type:"primary"},
						{name:"取消", event:"cancel", close:true},
					]
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
